<template>
	<view class="mL15 mR15">
		<view class="bold font18 pT25 pB25">联系方式</view>
		<view class="bgf radius20 pT20 pB20 pL15 pR15">
			<view class="flex jst-between font15">
				<view class="u-8">支付内容</view>
				<view>查看联系方式</view>
			</view>
			<view class="flex jst-between font15 mT25">
				<view class="u-8">查看费用</view>
				<view class="u-red bold">￥{{ totalAmount }}</view>
			</view>
		</view>
		<view v-if="wxSync">
			<view class="bold font18 pT25 pB25">支付方式</view>
			<view class="bgf radius20 pT20 pB20 pL15 pR15">
				<view class="flex jst-between font15 payItem" v-for="(item,i) in payWayLis" :key="i">
					<view class="flex alg-center">
						<image class="payImg" :src="item.imgUrl" mode=""></image>
						<text class="mL10">{{item.typeName}}</text>
					</view>
					<view @click="checkedPay(item,i)">
						<image class="w36" v-if="item.checked" src="/static/image/checked.png" mode=""></image>
					    <image class="w36" v-else="item.checked" src="/static/image/noCheck.png" mode=""></image>
					</view>
				</view>
				
			</view>
		</view>
		<view class="flex jst-center bottomW" v-if="wxSync">
			<view class="pointer rightNowPay u-f font15 t-center" @click="rightNow">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	import { getPhonePayRecord, getPhonePay } from "@/api/common.js"
	export default {
		data() {
			return {
				payWayLis:[
					{typeName:'支付宝支付',checked:true,imgUrl: this.resources.zfbImg,value:1},
					{typeName:'微信支付',checked:false,imgUrl:this.resources.wxImg,value:0},
				],
				payWay:0,
				objPramas:{},
				totalAmount:0,
				wxSync:null
			}
		},
		async onShow() {
			this.wxSync= await this.xf.getIsShowPay();
		},
		async onLoad(e) {
			this.xfOddUserId = e.acquirerId;
			await this.payJobApi()
		},
		methods: {
			payJobApi(){
				getPhonePayRecord({}).then(res=>{
					const {result} = res
					this.totalAmount = result
				})
			},
			rightNow(){
				getPhonePay({
					oddUserId: this.xfOddUserId,
					paymentWay: this.payWay
				}).then(res=>{
					uni.showToast({
						icon:"none",
						title:"支付完成!"
					})
					uni.setStorageSync('isPay',1)
					setTimeout(()=>{
						uni.navigateBack()
					},2000)
				})		
				// this.xf.callPhone(this.objPramas)
			},
			checkedPay(v,i){
				console.log(i)
				this.payWay=v.value
				this.payWayLis.map((z,index)=>{
					z.checked = index === i ? true : false
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		
		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background: linear-gradient(0deg, #F8FAFF, #F7F8FB);
	
	}
</style>
<style scoped lang="scss">
	.payImg{
		width: 52rpx;
		height: 52rpx;
	}
	.payItem{
		margin-bottom: 48rpx;
		&:last-child{
			margin-bottom: 0;
		}
	}
	.bottomW{
		position: fixed;
		bottom:40rpx;
		width: 100%;
		left: 0;
	}

</style>
